import React, { PureComponent, Fragment } from 'react';
import { Row, Col, Form, Button, Input, Select, DatePicker, message, InputNumber } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const { MonthPicker } = DatePicker;

import styles from './YlybAddForm.less';

import moment from 'moment';
import { connect } from 'dva';
@connect()
class YlybAddForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {};
    this.dispatch = this.props.dispatch;
  }

  componentDidMount() {
    // var p = this.props;
    // var r = p.record;
    // this.props.form.setFields({
    //   clbm: {
    //     value: r.clbm,
    //   },
    //   wtlx: {
    //     value: r.wtlx,
    //   },
    //   scsj: {
    //     value: r.scsj ? moment(Date(r.scsj.slice(6, -2))) : null,
    //   },
    //   sbsj: {
    //     value: r.sbsj ? moment(Date(r.sbsj.slice(6, -2))) : null,
    //   },
    // });
  }

  /* 获取下拉框初始数据 */

  // 点击button
  handleSubmit = e => {
    let _self = this;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        var r = {};
        r.id = '';
        r.dlmc = values.dlmc;
        r.nf = values.nyf.format('YYYY');
        r.yf = values.nyf.format('M');

        r.sbsj = '';
        r.sbryzh = '';
        r.sbry = '';
        r.sbbm = '';
        r.sbbmmc = '';

        r.rxdgb20 = values.rxdgb20 == undefined ? 0 : values.rxdgb20;
        r.rxdgb25 = values.rxdgb25 == undefined ? 0 : values.rxdgb25;
        r.rxdgbhgy = values.rxdgbhgy == undefined ? 0 : values.rxdgbhgy;
        r.yssjlz1 = values.yssjlz1 == undefined ? 0 : values.yssjlz1;
        r.yssjlz2 = values.yssjlz2 == undefined ? 0 : values.yssjlz2;
        r.ysjdn7001 = values.ysjdn7001 == undefined ? 0 : values.ysjdn7001;
        r.ysjdn7002 = values.ysjdn7002 == undefined ? 0 : values.ysjdn7002;
        r.ysjztbj = values.ysjztbj == undefined ? 0 : values.ysjztbj;
        r.ysjfcjqmjg = values.ysjfcjqmjg == undefined ? 0 : values.ysjfcjqmjg;
        r.cps = values.cps == undefined ? 0 : values.cps;
        r.lqlm = values.lqlm == undefined ? 0 : values.lqlm;
        r.snlm = values.snlm == undefined ? 0 : values.snlm;
        r.lmgf = values.lmgf == undefined ? 0 : values.lmgf;
        r.lxwx = values.lxwx == undefined ? 0 : values.lxwx;
        r.dlhx = values.dlhx == undefined ? 0 : values.dlhx;
        r.jsdzz = values.jsdzz == undefined ? 0 : values.jsdzz;
        r.bz = values.bz == undefined ? 0 : values.bz;
        r.sfth = ''; //1正常，2打回来
        _self.dispatch({
          type: 'maintain/fetchYlybAdd',
          payload: {
            rm: r,
          },
          callback: response => {
            if (response.status) {
              message.success('新增成功');
              this.props.handleCancel(this.props.modalName);
              this.props.GetQueryModelData(this.props.queryCon);
            } else {
              message.error('新增失败');
              console.log(response.ErrorMessage);
            }
          },
        });
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
    this.props.GetQueryProblem(this.props.queryCon);
  };

  render() {
    var s = this.state;
    var p = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    };
    const formItemLayout1 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
    };

    return (
      <Form className={styles.YlybAddForm} onSubmit={this.handleSubmit}>
        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="道路名称">
              {getFieldDecorator('dlmc', {
                rules: [{ required: true, message: '请输入道路名称' }],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="年月">
              {getFieldDecorator('nyf', {
                rules: [{ required: true, message: '请选择年月' }],
              })(<MonthPicker />)}
            </FormItem>
          </Col>
        </Row>

        {/* 
        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="上报时间">
              {getFieldDecorator('sbsj')(<DatePicker  />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="上报人员账号">
              {getFieldDecorator('sbryzh')(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="上报人员">
              {getFieldDecorator('sbry')(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col> 
        </Row>
          */}

        {/* <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="上报部门">
              {getFieldDecorator('sbbm')(<DatePicker  />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="上报部门名称">
              {getFieldDecorator('sbbmmc')(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
        </Row> */}

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="20*10*6">
              {getFieldDecorator('rxdgb20', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="25*25*5">
              {getFieldDecorator('rxdgb25', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="花岗岩">
              {getFieldDecorator('rxdgbhgy', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
        </Row>

        {/* <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="380*680">
              {getFieldDecorator('yssjlz1', {
                rules: [
                  {
                    pattern: /^\d+(?=\.{0,1}\d+$|$)/,
                    message: '数值应为正整数',
                  },
                ],
              })(<Input min={1} addonAfter="只" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="">
              {getFieldDecorator('yssjlz2', {
                rules: [
                  {
                    pattern: /^\d+(?=\.{0,1}\d+$|$)/,
                    message: '数值应为正整数',
                  },
                ],
              })(<Input min={1} addonAfter="套" />)}
            </FormItem>
          </Col>
        </Row> */}

        <Row>
          {/* <Col span={8}>
            <FormItem {...formItemLayout} label="DN700">
              {getFieldDecorator('ysjdn7001', {
                rules: [
                  {
                    pattern: /^\d+(?=\.{0,1}\d+$|$)/,
                    message: '数值应为正整数',
                  },
                ],
              })(<Input min={1} addonAfter="只" />)}
            </FormItem>
          </Col> */}
          <Col span={8}>
            <FormItem {...formItemLayout} label="DN700">
              {getFieldDecorator('ysjdn7002', {
                rules: [
                  {
                    pattern: /^\d+(?=\.{0,1}\d+$|$)/,
                    message: '数值应为正整数',
                  },
                ],
              })(<Input min={1} addonAfter="套" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="铸铁边井">
              {getFieldDecorator('ysjztbj')(<Input min={1} addonAfter="套" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="防沉降球墨井盖">
              {getFieldDecorator('ysjfcjqmjg')(<Input min={1} addonAfter="套" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="侧平石">
              {getFieldDecorator('cps', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="沥青路面">
              {getFieldDecorator('lqlm', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="道路划线">
              {getFieldDecorator('dlhx', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="水泥路面">
              {getFieldDecorator('snlm', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="路面灌缝">
              {getFieldDecorator('lmgf', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="积水点整治">
              {getFieldDecorator('jsdzz', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="零星维修">
              {getFieldDecorator('lxwx', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input min={1} addonAfter="m2" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout1} label="备 注">
              {getFieldDecorator('bz', {
                rules: [
                  {
                    pattern: /^.{0,2000}$/gi,
                    message: '字数不超过两千字',
                  },
                ],
              })(<TextArea rows={4} />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <FormItem style={{ textAlign: 'center' }}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </FormItem>
        </Row>
      </Form>
    );
  }
}

const YlybAddFm = Form.create()(YlybAddForm);
export default YlybAddFm;
